<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TreeGrid + QueryReadStore Demo</title>

<link rel="stylesheet" type="text/css" href="theme.css" />
<style type="text/css">
body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

#debugPanel pre {
    font-family: "Lucida Console", "Courier New", Courier, monospace;
}

div.container {
    border: 0px solid green;
    margin: 10px;
}
</style>
<script type="text/javascript">
var djConfig = {
    isDebug: true,
    parseOnLoad: true,
    locale: "en",
    extraLocale: ["en"]
};
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.3/dojo/dojo.xd.js.uncompressed.js"></script>
<script type="text/javascript">
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojo.date.locale");
    dojo.require("dojo.parser");

    dojo.require("dijit.dijit");
    dojo.require("dijit.Dialog");
    dojo.require("dijit.form.CheckBox");
    dojo.require("dijit.form.ComboBox");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.form.DateTextBox");
    dojo.require("dijit.form.FilteringSelect");
    dojo.require("dijit.form.NumberSpinner");
    dojo.require("dijit.form.RadioButton");
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.TitlePane");
    dojo.require("dijit.tree.ForestStoreModel");

    dojo.require("dojox.html.entities");
    dojo.require("dojox.layout.FloatingPane");
    dojo.require("dojox.layout.ResizeHandle");
    dojo.require("dojox.widget.Standby");

    dojo.require("dojox.data.QueryReadStore");
    dojo.require("dojox.grid.TreeGrid");

</script>
<script type="text/javascript">
function getDebugMsg() {
    var args = [];
    for (var i = 0; i< arguments.length; i += 1) {
        args.push(arguments[i]);
    }
    var msg = args.join(" ");
    return msg;
}

function debug(messages) {
    var msg = getDebugMsg.apply(null, arguments);
    console.debug(msg);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML = msg;
}

function append(messages) {
    var msg = getDebugMsg.apply(null, arguments);

    var msgDiv = dojo.byId("debugPanelContent");
    msgDiv.innerHTML += "\n" + msg;
}

function show(id) {
    var element = dojo.byId(id);
    if (element.style.display === "none") {
        element.style.display = "";
    }
}

function hide(id) {
    var element = dojo.byId(id);
    element.style.display = "none";
}
</script>
<style type="text/css">
body {
    padding: 10px;
}

.gridContainer {
    width: 100%;
    height: 300px;
}

</style>
<script type="text/javascript">
var GlobalVariables = {
    "contextURL": null,
    "identifier": "moniker",
    "dp": null
};


/**
 * Insert item to an array.
 * @param {Object} item The item.
 * @param {Object} array The array.
 * @param {Object} insertToFirst true if item will be inserted as first item.
 */
function insertToArray(item, array, insertToFirst) {
    if (insertToFirst) {
        array.unshift(item);
    } else {
        array.push(item);
    }
}

var ItemType = {
    PARENT: "PARENT",
    CHILD: "CHILD"
};

function canSort(inSortInfo) {
    return true;
}

function getGridLayout() {
    var layout = [
    {
        name: "Name",
        field: "name",
        width: "20%"
    }, {
        name: "Age",
        field: "age",
        width: "auto"
    }, {
        name: "Job Title",
        field: "title",
        width: "auto"
    }, {
        name: "Position",
        field: "position",
        width: "auto"
    }, {
        name: "Telephone",
        field: "telephone",
        width: "auto"
    }];

    return layout;
}

dojo.addOnLoad(function() {
    debug("loading");

    // initialize tree grid
    var treegrid = dijit.byId("treegrid");
    if (!treegrid) {
        var url = "./servlet/QueryStoreServlet";
        var store = new dojox.data.QueryReadStore({
            url: url,
            requestMethod: "get"
        });

        var query = {
            type: ItemType.PARENT
        };

        var treeModel = new dijit.tree.ForestStoreModel({
            store: store,
            query: query,
            rootId: "$root$",
            rootLabel: "ROOT",
            childrenAttrs: ["children"],
            deferItemLoadingUntilExpand: true
        });

        var layout = getGridLayout();

        // tree grid
        treegrid = new dojox.grid.TreeGrid({
            treeModel: treeModel,
            expandoCell: 0,
            defaultOpen: false,
            columnReordering: true,
            rowsPerPage: 20,
            structure: layout,
            sortChildItems: true,
            canSort: function(sortInfo) {
                return true;
            }
        }, "treegrid");

        treegrid.startup();

        dojo.connect(window, "resize", treegrid, "resize");
    }
});

</script>
</head>
<body class="tundra">

  <div id="main" class="container">

    <div id="titlePanel" dojoType="dijit.TitlePane" title="Panel" style="">
      <div id="resizablePanel" style="position:relative; padding: 10px; border:1px solid black;">

        <!-- Content -->
        <div class="content">
            <!-- tree grid -->
            <div class="gridContainer">
              <div id="treegrid"></div>
            </div>
        </div>

        <!-- Resize Handle -->
        <div id="resizeHandle" dojoType="dojox.layout.ResizeHandle" targetId="resizablePanel"></div>
      </div>
    </div>

    <!-- Button Panel -->
    <div dojoType="dojo.dnd.Moveable">
      <div id="buttonPanel" dojoType="dijit.TitlePane" title="Button Panel" style="">
        <input id="numRows" dojoType="dijit.form.TextBox" value="0" />
        <div dojoType="dijit.form.Button" onClick="clearSort();">Clear sort</div>
      </div>
    </div>
  </div>

  <!-- Debug Panel -->
  <div id="debugPanel" dojoType="dojox.layout.FloatingPane" title="Console" resizable="true" dockable="true" style="position: absolute; top: 400px; left: 600px; width: 500px; height: 150px;">
    <pre id="debugPanelContent"></pre>
  </div>
</body>
</html>
